<template>
	<view class="container">
		<view class="register_bg">
			<image src="@/static/public/loginBgc.png" mode=""></image>
		</view>
		<view class="register_box">
			<view class="" style="width: 128rpx;height: 128rpx;margin: 0 auto 80rpx;">
				<image src="../../static/app.png" mode="" style="border-radius: 20rpx;"></image>
			</view>
			<view class="" style="font-size: 36rpx;font-family: PingFang SC, PingFang SC;font-weight: bold;color: #1d93ff;text-align: center;margin-bottom: 50rpx;">
				{{$t('login.name3')}}
			</view>
			<view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" :placeholder="$t('user.name45')" v-model="email">
			</view>
			<view class="register_item flex-between" >
				<input type="text" placeholder-class="inputPlaceholder" :placeholder="$t('user.name44')" v-model="code" style="width: 60%;">
				<u-button type="primary"  @tap="getCode" style="width: 170rpx;margin: 0;font-size: 24rpx;" :text='tips' shape="circle"></u-button>
			</view>
			<view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" :placeholder="$t('login.name21')"  v-model="mobile" >
			</view>
			<view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" :placeholder="$t('user.name46')" v-model="pwd">
			</view>
			<!-- <view class="register_item">
				<input type="text" disabled placeholder-class="inputPlaceholder" placeholder="请选择问题" v-model="key">
				<picker :range="selectList" @change="changeValue">
					<input type="text" placeholder-class="inputPlaceholder" placeholder="请选择问题" v-model="key">
				</picker>
			</view> -->
			<!-- <view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请输入答案" v-model="value">
			</view> -->
			<!-- <view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请输入您的登录密码" v-model="pwd">
			</view> -->
			<!-- <view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请再次输入您的登录密码" v-model="repwd">
			</view> -->
			<view class="flex-between" style="justify-content: flex-end; margin-right: 20rpx;">
				<text @click="$fun.jump(`/pageA/public/login`)"
					style="z-index: 100;color: #ffffff;font-size: 22rpx;;margin-right: 5rpx;">
					{{$t('login.name8')}} 
				</text>
				<u-icon name="lock" color="#ffffff" size="15"></u-icon>
			</view>
			<button class="register_button" @click="toLogin" :disabled="logining">
				{{$t('login.name9')}}
			</button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				mobile: '',
				email:'',
				truename: '',
				code: '',
				key: '',
				value: '',
				logining: false,
				selectList: [],
				pwd: "",
				repwd: "",
				tip: '发送验证码',
				timer: null,
				event: 'rePwd',
				config: 0,
				configObj: {},
				disabled: false,
				tips:this.$t('login.name10'),
			}
		},
		onLoad(Option) {
			if (Option.invitation) {
				this.invitation = Option.invitation
				this.disabled = true
			}
		},
		onShow() {
			this.$fun.ajax.post('config/gettitle', {}).then(res => {
				this.selectList = res.data
			})
		},
		methods: {
			...mapMutations(['login']),
			changeValue(e) {
				this.key = this.selectList[e.detail.value]
			},
			sendCode() {
				if (this.tips) {
					this.tips = 60;
					this.timer = setInterval(() => {
						if (this.tips <= 0) {
							this.tips = this.$t('login.name10')
							clearInterval(this.timer)
							this.timer = null
						} else {
							this.tips -= 1
						}
					}, 1000)
				}
			},
			gotoApp() {
				location.href = this.configObj.download_address
			},
			async getCode() {

				const {
					email,
					event
				} = this;

				const sendData = {
					email,
					event
				};

				if (!email) {
					this.$fun.msg(this.$t('user.name45'));
					return
				}

				const code = await this.$fun.ajax.post('ems/send', sendData);
				if (code.code === 1) {
					this.$fun.msg(this.$t('login.name11'));
					this.sendCode();
				} else {
					this.$fun.msg(code.data.msg ? code.data.msg : this.$t('login.name12'));
				}
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.navigateBack();
			},
			toRegist() {
				this.$fun.jump('./login', 3, 0)
			},
			async toLogin() {
				const that = this
				const {
					email,
					pwd,
					code,
					mobile
				} = this;
				const sendData = {
					code,
					email,
					pwd,
					mobile
				};
				// 手机号为空
				if (!email) {
					this.$fun.msg(this.$t('user.name45'));
					return
				}
				if (!mobile) {
					this.$fun.msg(this.$t('login.name21'));
					return
				}
				if (!code) {
					this.$fun.msg(this.$t('login.name13'));
					return
				}
				//登录密码
				if (!pwd) {
					this.$fun.msg(this.$t('login.name1'));
					return
				}

				this.logining = true;

				const result = await this.$fun.ajax.post('user/rePwd', sendData);
				if (result.code == 1) {
					this.$fun.msg(result.msg);
					that.$fun.jump('/pages/index/index', 3, 1200)
				} else {
					this.logining = false;
				}
			}
		},
		destroyed() {
			clearInterval(this.timer)
			this.timer = null
		}

	}
</script>

<style lang='scss'>
	.container {
		height: 100vh;
		overflow: hidden;
		.register_bg {
			height: 100%;
	
			image {
				width: 100%;
				height: 100%;
			}
	
		}
	
		.register_box {
			margin: 20upx 75upx;
			position: absolute;
			top: 18%;
			left: 0;
			right: 0;
	
			.register_item {
				position: relative;
				height: 88rpx;
				background: rgba(94, 94, 94, 0.2);
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				margin: 24rpx auto;
				padding: 0 20rpx;
	
				input {
					width: 100%;
					font-size: 24upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}
	
				.inputPlaceholder {
					/* font-size: 24upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #CCCCCC; */
				}
	
				.code {
					position: absolute;
					top: 25upx;
					right: 40upx;
					font-size: 24upx;
				}
			}
	
			.register_button {
				margin-top: 100upx;
				width: 100%;
				height: 80upx;
				background: #1e84f1;
				border-radius: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
			}
		}
	
		.register-section {
			position: absolute;
			left: 0;
			bottom: 50upx;
			width: 100%;
			text-align: center;
	
			text {
				color: #FE555A;
				margin-left: 10upx;
			}
		}
	}
</style>